<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>图片墙</title>
	<style type="text/css">
	#content{
		width:612px;
     	height:612px;
		margin:0px auto;
		position: relative;
	}
     ul,li{
     	margin:0px;
     	padding:0px;
     }
     .pic1,.pic2,.pic3{
     	top:0;
     }
     .pic2,.pic5,.pic8{
     	left:204px;
     }
     .pic3,.pic6,.pic9{
     	left:408px;
     }
     .pic4,.pic5,.pic6{
     	top:204px;
     }
     .pic7,.pic8,.pic9{
     	top:408px;
     }
     li{
     	position:absolute;
     	list-style: none;
      	width: 200px;
     	height:200px;
     	text-align: center;
     	line-height: 200px;
     	border:2px solid #DEDBDB;
     	transition:width 0.5s,height 0.5s;
     	-webkit-transition:width 0.5s,height 0.5s,-webkit-transform 0.5s;
     	-moz-transition:width 0.5s,height 0.5s,-moz-transform 0.5s;
     	-o-transition:width 0.5s,height 0.5s,-o-transform 1s;
     }
     li:hover{
     	width:224px;
     	height: 224px;
     	line-height: 224px;
     	border:2px solid #ADF0F2;
     	transform:rotate(360deg);
     	-webkit-transform:rotate(360deg);
     	-moz-transform:rotate(360deg);
     	-o-transform:rotete(360deg);
     	z-index:99999;
     }
     .pic1:hover,.pic2:hover,.pic3:hover{
     	top:-10px;
     }
     .pic2:hover,.pic5:hover,.pic8:hover{
     	left:194px;
     }
     .pic3:hover,.pic6:hover,.pic9:hover{
     	left:398px;
     }
     .pic4:hover,.pic5:hover,.pic6:hover{
     	top:194px;
     }
     .pic7:hover,.pic8:hover,.pic9:hover{
     	top:398px;
     }
     img{
     	max-width:100%;
     	max-height:100%;
     	vertical-align: middle;
     }
	</style>
</head>
<body>
	<div id="content">
		<ul>
			<li class="pic1"><img src="./image/1.jpg"/></li>
			<li class="pic2"><img src="./image/2.jpg"/></li>
			<li class="pic3"><img src="./image/3.jpg"/></li>
			<li class="pic4"><img src="./image/4.jpg"/></li>
			<li class="pic5"><img src="./image/5.jpg"/></li>
			<li class="pic6"><img src="./image/6.jpg"/></li>
			<li class="pic7"><img src="./image/7.jpg"/></li>
			<li class="pic8"><img src="./image/8.jpg"/></li>
			<li class="pic9"><img src="./image/9.jpg"/></li>
		</ul>
	</div>
</body>
</html>